<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <CompanySelector
          style="width: 300px; margin-right: 10px"
          :tagCount="100"
          :companyId="bloc.form.companyId"
          @on-change="(value) => (bloc.form.companyId = value)"
          v-if="Validation.isRootCompany && tepee === '1'"
        ></CompanySelector>
        <Input
          placeholder="手机号码"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
<!--        <DatePicker-->
<!--          type="daterange"-->
<!--          placeholder="添加时间"-->
<!--          format="yyyy/MM/dd"-->
<!--          v-model="bloc.form.date"-->
<!--          style="width: 200px; margin-right: 10px"-->
<!--        ></DatePicker>-->
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items">
<!--        @on-selection-change="(selection) => (bloc.memberSelectArr = selection)"-->

        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="removeItem(row)"
              type="warning"
              v-if="Validation.check(Resources.MEMBER_DELETE)"
            >
              删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { ListBloc } from '@/view/news/SelectedMemberBloc';
    import { Member } from '@/base/model/Member';
    import { formatDate } from '@/base/util/Dates';
    import CompanySelector from '@/component/CompanySelector.vue';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    import { isEmpty } from '@/base/util/Strings';
    import { store } from '@/store/Store';
    import { deepAssign } from '@/base/util/Objects';

    const columns = (bloc: ListBloc) => [
        {
            title: '所属品牌商',
            key: 'companyId',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: bloc.getCompanyName(params.row.companyId)
                    }
                });
            },
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '所属经销商',
            key: 'agentId',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: bloc.getAgentName(params.row.agentId)
                    }
                });
            },
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '昵称',
            key: 'nickname',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '手机',
            key: 'phone',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '信息状态',
            key: 'newsStatus',
            align: 'left',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText:
                            params.row.newsStatus === 'CREATE'
                                ? '未读' : params.row.newsStatus === 'READ'
                                ? '已阅' : params.row.newsStatus === 'USER_DELETE'
                                ? '用户删除' : '数据删除'
                    }
                });
            },
            minWidth: 60,
            tooltip: true
        },
        {
            title: '确认时间',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.newsStatus === 'CREATE' ? '' : formatDate(
                            new Date(params.row.updated),
                            'yyyy-MM-dd hh:mm:ss'
                        )
                    }
                });
            },
            width: 220,
            align: 'left',
            tooltip: true
        }
    ];

    @Component({
        components: {
            CompanySelector
        }
    })
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc.newsId = vm.idx;
                if (vm.idx) {
                    vm.bloc.load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize).catch((e) => {
                        vm.$Message.error('获取错误');
                    });
                    vm.bloc.getCompanyList(vm.bloc.companyPage.pageIndex, vm.bloc.companyPage.pageSize, 'ASC');
                    vm.bloc.getAgentList(vm.bloc.angent.pageIndex, vm.bloc.angent.pageSize, 'ASC');
                } else {
                    vm.$Message.error('接收错误');
                }
            });
        }

        bloc: ListBloc = new ListBloc();
        columns = columns(this.bloc);
        Validation = Validation;
        Resources = Resources;

        get tepee() {
            return store.state.user.tepee
        }
        get idx() {
            return Number(this.$route.params.newsId);
        }
        removeItem(dataItem: Member) {
            // this.$Modal.confirm({
            //     title: '提示',
            //     content: '确认删除后将无法恢复！还要继续吗？',
            //     okText: '删除',
            //     cancelText: '取消',
            //     onOk: () => {
            //         this.bloc
            //             .removeItem(dataItem)
            //             .then((value) => {
            //                 this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
            //             })
            //             .then(() => {
            //                 this.$Message.success('删除成功');
            //             })
            //             .catch((e) => {
            //                 this.$Message.error('删除失败');
            //             });
            //     }
            // });
        }
        //
        // modifyItem(dataItem: Member) {
        //     this.$router.replace(`/member/${dataItem.id}`);
        // }

        // wishes() {
        //     if (isEmpty(this.bloc.memberSelectArr)) {
        //         this.$Message.error('请选择至少一个会员');
        //         return false;
        //     }
        //     for (let i = 0; i < this.bloc.memberSelectArr.length; i++) {
        //         let companyId = this.bloc.memberSelectArr[0].companyId;
        //         let agentId = this.bloc.memberSelectArr[0].agentId;
        //         if (this.bloc.memberSelectArr[i].companyId !== companyId) {
        //             this.$Message.error('请选择相同品牌商的会员');
        //             return false;
        //         }
        //         if (this.bloc.memberSelectArr[i].agentId !== agentId) {
        //             this.$Message.error('请选择相同品牌商相同经销商的会员');
        //             return false;
        //         }
        //     }
        //     sessionStorage.setItem(
        //         'MEMBER_INFO',
        //         JSON.stringify(this.bloc.memberSelectArr)
        //     );
        //     this.$router.replace('/banners/wishes/add');
        // }
        //
        // newsPush() {
        //     if (isEmpty(this.bloc.memberSelectArr)) {
        //         this.$Message.error('请选择至少一个会员');
        //         return false;
        //     }
        //     sessionStorage.setItem(
        //         'MEMBER_INFO',
        //         JSON.stringify(this.bloc.memberSelectArr)
        //     );
        //     this.$router.replace('/news/add');
        // }

        // onSelectChange(selection) {
        //     this.bloc.memberSelectArr = selection;
        // }
    }
</script>

<style lang="less">
</style>
